<template>
	<view class="">
		<u-navbar title="客官意向" :autoBack="true" bgColor="#fff" :fixed="false"></u-navbar>
		<view class="p-30" style="padding-bottom: 160rpx;">
			<u-form labelPosition="left" :model="form" :rules="rules" ref="form" labelWidth="0" errorType="toast">
				<view class="title">
					基本信息
				</view>
				<view class="card mt-30">
					<u-form-item label=" " prop="type" @click="action('type')">
						<view class="flex-row justify-between align-center w-full">
							<view class="">
								服务类型
							</view>
							<view class="">
								<u-input disabled disabledColor="#ffffff" v-model="form.type" border="none"
									placeholder="请输入类型"></u-input>
							</view>
						</view>
					</u-form-item>
					<u-line color="#F6F6F6"></u-line>
					<u-form-item label=" " prop="starttime">
						<view class="flex-column   w-full">
							<view class="">
								服务时间
							</view>
							<view class="flex-row align-center justify-between w-full mt-10">
								<view class="" style="width: 48%;" @click="clickTime('start');">
									<u-input disabled v-model="form.starttime" disabledColor="#fff" border="none"
										placeholder="开始时间"></u-input>
								</view>
								<view class="" style="width: 48%;" @click="clickTime('end');">
									<u-input disabled v-model="form.endtime" disabledColor="#fff" border="none"
										placeholder="结束时间"></u-input>
								</view>
							</view>
						</view>
					</u-form-item>
					<u-line color="#F6F6F6"></u-line>
					<u-form-item label=" " prop="price" @click="action('price')">
						<view class="flex-row justify-between align-center w-full">
							<view class="">
								服务价格
							</view>
							<view class="">
								<u-input disabled disabledColor="#ffffff" v-model="form.price" border="none" placeholder="请输入价格"></u-input>
							</view>
						</view>
					</u-form-item>
					<u-form-item label=" " prop="mobile">
						<view class="flex-row justify-between align-center w-full">
							<view class="">
								联系方式
							</view>
							<view class="">
								<u-input v-model="form.mobile" border="none" placeholder="请输入联系方式"></u-input>
							</view>
						</view>
					</u-form-item>
				</view>
				<view class="title mt-30">
					服务项目
				</view>
				<view class="card mt-30" style="padding: 30rpx;">
					<u-form-item label=" ">
						<view class="tag">
							<view class="tag-item" @click.stop="tagClick(index)" :class="{'active':item.checked}"
								v-for="(item,index) in serveData1">
								{{item.name}}
							</view>
						</view>
					</u-form-item>
				</view>
				<view class="title mt-30">
					服务要求
				</view>
				<view class="card mt-30" style="padding: 30rpx;">
					<u-form-item label=" ">
						<view class="tag">
							<view class="tag-item" @click.stop="tagClick1(index)" :class="{'active':item.checked}"
								v-for="(item,index) in yaoqiuData">
								{{item.name}}
							</view>
						</view>
					</u-form-item>
				</view>

			</u-form>
		</view>
		<view class="submit" @click="submit">
			<u-button :loading="loading" :color="$u.color.color" shape="circle">立即发布</u-button>
		</view>
		<u-datetime-picker ref="datetimePicker" @cancel="timeCancel" @confirm="timeConfirm" :show="timeShow"
			v-model="time" mode="datetime" :formatter="formatter"></u-datetime-picker>
		<u-action-sheet :actions="actionList" :title="actionTitle" :show="actionShow" @select="select"
			@close="close"></u-action-sheet>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		intentionSubmit
	} from '@/common/api.js'
	import {
		mapState
	} from "vuex";
	import commonMixin from '@/mixins/common.js';
	export default {
		mixins: [commonMixin],
		data() {
			return {
				timeShow: false,
				time: Number(new Date()),
				timeType: "",
				serveData1: [],
				actionType: "",
				actionList: [],
				actionTitle: '',
				actionShow: false,
				loading: false,
				form: {
					service: "",
					type: "",
					price: "",
					mobile: "",
					yaoqiu: "",
					starttime: "",
					endtime: ""
				},
				rules: {
					type: {
						type: 'string',
						required: true,
						message: '请选择服务类型',
						trigger: ['blur', 'change']
					},
					service: {
						type: 'string',
						required: true,
						message: '请选择服务项目',
						trigger: ['blur', 'change']
					},
					starttime: {
						type: 'string',
						required: true,
						message: '请选择服务时间',
						trigger: ['blur', 'change']
					},
					price: {
						type: 'string',
						required: true,
						message: '请选择服务价格',
						trigger: ['blur', 'change']
					},
					yaoqiu: {
						type: 'string',
						required: true,
						message: '请选择服务要求',
						trigger: ['blur', 'change']
					},
					mobile: [{
							required: true,
							message: '请输入联系方式',
							trigger: ['change', 'blur'],
						},
						// {
						// 	// 自定义验证函数，见上说明
						// 	validator: (rule, value, callback) => {
						// 		// 上面有说，返回true表示校验通过，返回false表示不通过
						// 		// uni.$u.test.mobile()就是返回true或者false的
						// 		return uni.$u.test.mobile(value);
						// 	},
						// 	message: '联系方式不正确',
						// 	// 触发器可以同时用blur和change
						// 	trigger: ['change', 'blur'],
						// }
					],
				},
				yaoqiuData: []
			}
		},
		computed: {
			...mapState(["serveData"]),
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		onLoad() {
			this.serveData1 = JSON.parse(JSON.stringify(this.serveData));
			this.serveData1 = this.serveData1.map(item => {
				item.checked = false
				return item
			});

			for (const key in this.configData.yaoqiu) {
				this.yaoqiuData.push({
					name: this.configData.yaoqiu[key],
					checked: false
				})
			}

		},
		methods: {
			formatter(type, value) {
				console.log('type', type);
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				return value
			},
			clickTime(type) {
				this.timeType = type;
				this.timeShow = true;
				uni.hideKeyboard();
			},
			timeConfirm(e) {
				if (this.timeType == 'start') {
					console.log(e);
					// this.form.starttime = e.value
					this.form.starttime = uni.$u.date(e.value, 'yyyy-mm-dd hh:MM')
				} else {
					// this.form.endtime = e.value
					this.form.endtime = uni.$u.date(e.value, 'yyyy-mm-dd hh:MM')
				}
				this.timeShow = false
			},
			timeCancel() {
				this.timeShow = false
			},
			action(type) {
				uni.hideKeyboard();
				let data = [];
				let title = '';
				switch (type) {
					case 'type':
						title = "服务类型";
						for (const key in this.configData.type) {
							data.push({
								name: this.configData.type[key]
							})
						}
						break;
					case 'time':
						title = "服务时间";
						for (const key in this.configData.time) {
							data.push({
								name: this.configData.time[key]
							})
						}
						break;
					case 'price':
						title = "服务价格";
						for (const key in this.configData.price) {
							data.push({
								name: this.configData.price[key]
							})
						}
						break;
				}
				this.actionTitle = title;
				this.actionType = type;
				this.actionList = data;
				this.actionShow = true;
			},
			tagClick(index) {
				this.serveData1 = this.serveData1.map((v, i) => {
					if (index == i) v.checked = !v.checked
					return v;
				})
			},
			tagClick1(index) {
				this.yaoqiuData = this.yaoqiuData.map((v, i) => {
					if (index == i) v.checked = !v.checked
					return v;
				})
			},
			select(e) {
				console.log(this.actionType);
				switch (this.actionType) {
					case 'time':
						this.form.time = e.name
						break;
					case 'price':
						this.form.price = e.name
						break;
					case 'type':
						this.form.type = e.name
						break;
				}

				this.actionShow = false
			},
			close() {
				this.actionTitle = "";
				this.actionType = "";
				this.actionList = [];
				this.actionShow = false;
			},
			submit() {
				let vm = this;
				let service = this.serveData1.filter(v => v.checked);
				if (service.length == 0) {
					vm.$refs.uToast.show({
						type: 'error',
						message: '请选择服务项目',
						complete() {
							vm.loading = false;
						}
					})
					return false;
				} else {
					this.form.service = service.map(v => {
						return v.name
					});
					this.form.service = this.form.service.toString();
				}

				let yaoqiu = this.yaoqiuData.filter(v => v.checked);
				if (yaoqiu.length == 0) {
					vm.$refs.uToast.show({
						type: 'error',
						message: '请选择服务要求',
						complete() {
							vm.loading = false;
						}
					})
					return false;
				} else {
					this.form.yaoqiu = yaoqiu.map(v => {
						return v.name
					});
					this.form.yaoqiu = this.form.yaoqiu.toString();
				}

				this.$refs.form.validate().then(res => {
					intentionSubmit(this.form).then(res => {
						console.log('res', res);
						vm.$refs.uToast.show({
							type: 'success',
							message: '提交成功',
							complete() {
								vm.loading = false;
								uni.redirectTo({
									url: '/pages/mine/wish/index'
								})
							}
						})
					})
				}).catch(errors => {
					// uni.$u.toast('校验失败')
					vm.loading = false;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card {
		padding: 0 30rpx;
	}

	.submit {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.tag {
		display: flex;
		flex-direction: row;
		// justify-content: space-between;


		&-item {
			border: 1rpx solid #E6E6E6;
			padding: 10rpx 20rpx;
			margin-left: 10rpx;
			color: #575859;
			background-color: #fff;
			border-radius: 30rpx;
			font-size: 24rpx;
		}

		&-item:first-child {
			margin: 0;
		}
	}

	.active {
		color: #A11A0E;
		border-color: #A11A0E;
		background-color: transparent;
	}
</style>